<template>
  <button @click="flag = !flag">切换</button>
  <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <div class="spare" v-if="flag"></div>
  </transition>
</template>

<script setup lang="ts">
/**
 *   @before-enter="beforeEnter" //对应enter-from
 *   @enter="enter"//对应enter-active
 *   @after-enter="afterEnter"//对应enter-to
 *   @enter-cancelled="enterCancelled"//显示过度打断
 *   @before-leave="beforeLeave"//对应leave-from
 *   @leave="leave"//对应enter-active
 *   @after-leave="afterLeave"//对应leave-to
 *   @leave-cancelled="leaveCancelled"//离开过度打断
 */
import { ref } from 'vue';
// 引入 gsap 动画库
import { gsap } from 'gsap';
const flag = ref<boolean>(true);

// transition 生命周期,可以用来使用 gsap 动画库
const beforeEnter = (el: Element) => {
  gsap.set(el, { width: 0, height: 0 });
};
const enter = (el: Element, done: gsap.Callback) => {
  gsap.to(el, {
    width: 200,
    height: 200,
    onComplete: done // 表示动画已经完成
  });
};
const leave = (el: Element, done: gsap.Callback) => {
  gsap.to(el, {
    width: 0,
    height: 0,
    onComplete: done // 表示动画已经完成
  });
};
</script>

<style lang="scss" scoped>
.spare {
  width: 200px;
  height: 200px;
  background-color: rgb(234, 42, 74);
}
</style>
